<script setup lang="ts" name="CodeDemoDemo">
import { ref, computed, defineComponent, h } from 'vue'
import CodeDemo from '@/components/common/CodeDemo/index.vue'

// 演示类型定义
type DemoType = 'default' | 'languages' | 'themes' | 'custom' | 'interactive'

// 当前选中的演示类型
const activeDemo = ref<DemoType>('default')

// 演示配置
const demoConfigs = [
  { id: 'default' as DemoType, name: '默认样式', icon: '💻', color: 'primary' },
  { id: 'languages' as DemoType, name: '多语言', icon: '🌐', color: 'secondary' },
  { id: 'themes' as DemoType, name: '主题切换', icon: '🎨', color: 'accent' },
  { id: 'custom' as DemoType, name: '自定义样式', icon: '🛠️', color: 'info' },
  { id: 'interactive' as DemoType, name: '交互功能', icon: '🖱️', color: 'success' },
]

// 示例代码
const sampleCodes = {
  javascript: `function greet(name) {
  return \`Hello, \${name}!\`
}

console.log(greet('World'))`,
  typescript: `interface User {
  id: number
  name: string
  email: string
}

const user: User = {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com'
}`,
  vue: `<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="increment">Count: {{ count }}</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const msg = ref('Hello Vue 3!')
const count = ref(0)

const increment = () => {
  count.value++
}
</script>`,
  python: `def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))`,
  css: `.custom-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  color: white;
  padding: 12px 24px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.custom-button:hover {
  transform: translateY(-2px);
}`
}

// 切换演示类型
const switchDemo = (demoType: DemoType) => {
  activeDemo.value = demoType
}

// Vue组件定义
const DefaultExample = defineComponent({
  name: 'DefaultExample',
  render() {
    return h(CodeDemo, {
      title: 'JavaScript 示例',
      description: '展示基本的 JavaScript 代码',
      code: sampleCodes.javascript,
      language: 'javascript',
      previewHeight: 'auto',
      codeHeight: '300px'
    })
  },
})

const LanguagesExample = defineComponent({
  name: 'LanguagesExample',
  render() {
    return h('div', { class: 'space-y-4' }, [
      h(CodeDemo, {
        title: 'TypeScript',
        code: sampleCodes.typescript,
        language: 'typescript',
        previewHeight: 'auto',
        codeHeight: '200px'
      }),
      h(CodeDemo, {
        title: 'Vue 3',
        code: sampleCodes.vue,
        language: 'vue',
        previewHeight: 'auto',
        codeHeight: '200px'
      }),
      h(CodeDemo, {
        title: 'Python',
        code: sampleCodes.python,
        language: 'python',
        previewHeight: 'auto',
        codeHeight: '200px'
      })
    ])
  },
})

const ThemesExample = defineComponent({
  name: 'ThemesExample',
  render() {
    return h('div', { class: 'space-y-4' }, [
      h('div', { class: 'text-sm text-base-content/70 mb-2' }, '不同主题的代码高亮效果'),
      h(CodeDemo, {
        title: '默认主题',
        code: sampleCodes.css,
        language: 'css',
        previewHeight: 'auto',
        codeHeight: '200px'
      })
    ])
  },
})

const CustomExample = defineComponent({
  name: 'CustomExample',
  render() {
    return h('div', { class: 'custom-code-demo' }, [
      h(CodeDemo, {
        title: '自定义样式',
        description: '带有自定义样式的代码演示',
        code: sampleCodes.javascript,
        language: 'javascript',
        previewHeight: 'auto',
        codeHeight: '300px',
        customClass: 'custom-code-block'
      })
    ])
  },
})

const InteractiveExample = defineComponent({
  name: 'InteractiveExample',
  render() {
    return h(CodeDemo, {
      title: '交互式代码演示',
      description: '支持复制、折叠等交互功能',
      code: sampleCodes.vue,
      language: 'vue',
      previewHeight: 'auto',
      codeHeight: '400px',
      showCopyButton: true,
      showFoldButton: true,
      collapsible: true
    })
  },
})

// Vue组件映射
const exampleComponents = {
  default: DefaultExample,
  languages: LanguagesExample,
  themes: ThemesExample,
  custom: CustomExample,
  interactive: InteractiveExample,
}

// 获取当前示例组件
const currentExampleComponent = computed(() => {
  return exampleComponents[activeDemo.value] || DefaultExample
})

// 获取描述
const getDescription = (demoType: DemoType) => {
  const descriptions = {
    default: '展示 CodeDemo 组件的基本功能和默认样式',
    languages: '支持多种编程语言的代码高亮',
    themes: '不同主题的代码高亮效果',
    custom: '自定义样式的代码演示',
    interactive: '支持交互功能的代码演示',
  }
  return descriptions[demoType] || ''
}

// 获取模板代码
const getTemplateCode = (demoType: DemoType) => {
  const templates = {
    default: `<CodeDemo
  title="JavaScript 示例"
  description="展示基本的 JavaScript 代码"
  :code="javascriptCode"
  language="javascript"
  preview-height="auto"
  code-height="300px"
/>`,
    languages: `<div class="space-y-4">
  <CodeDemo
    title="TypeScript"
    :code="typescriptCode"
    language="typescript"
    preview-height="auto"
    code-height="200px"
  />
  <CodeDemo
    title="Vue 3"
    :code="vueCode"
    language="vue"
    preview-height="auto"
    code-height="200px"
  />
  <CodeDemo
    title="Python"
    :code="pythonCode"
    language="python"
    preview-height="auto"
    code-height="200px"
  />
</div>`,
    themes: `<CodeDemo
  title="CSS 样式"
  :code="cssCode"
  language="css"
  preview-height="auto"
  code-height="200px"
/>`,
    custom: `<div class="custom-code-demo">
  <CodeDemo
    title="自定义样式"
    description="带有自定义样式的代码演示"
    :code="javascriptCode"
    language="javascript"
    preview-height="auto"
    code-height="300px"
    custom-class="custom-code-block"
  />
</div>`,
    interactive: `<CodeDemo
  title="交互式代码演示"
  description="支持复制、折叠等交互功能"
  :code="vueCode"
  language="vue"
  preview-height="auto"
  code-height="400px"
  :show-copy-button="true"
  :show-fold-button="true"
  :collapsible="true"
/>`,
  }
  return templates[demoType] || ''
}

// 获取脚本代码
const getScriptCode = (demoType: DemoType) => {
  return `import { ref } from 'vue'
import CodeDemo from '@/components/common/CodeDemo/index.vue'

export default {
  name: 'CodeDemoExample',
  components: {
    CodeDemo
  },
  setup() {
    const javascriptCode = ref(\`${sampleCodes.javascript.replace(/\n/g, '\\n')}\`)
    const typescriptCode = ref(\`${sampleCodes.typescript.replace(/\n/g, '\\n')}\`)
    const vueCode = ref(\`${sampleCodes.vue.replace(/\n/g, '\\n')}\`)
    const pythonCode = ref(\`${sampleCodes.python.replace(/\n/g, '\\n')}\`)
    const cssCode = ref(\`${sampleCodes.css.replace(/\n/g, '\\n')}\`)

    return {
      javascriptCode,
      typescriptCode,
      vueCode,
      pythonCode,
      cssCode
    }
  }
}`
}

// 获取样式代码
const getStyleCode = (demoType: DemoType) => {
  const styles = {
    default: `/* 默认样式 */
.code-demo {
  border-radius: 0.75rem;
  overflow: hidden;
}`,
    languages: `/* 多语言样式 */
.language-selector {
  margin-bottom: 1rem;
}

.code-block {
  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
}`,
    themes: `/* 主题样式 */
.theme-light {
  --code-bg: #f8f9fa;
  --code-text: #212529;
}

.theme-dark {
  --code-bg: #1a1a1a;
  --code-text: #ffffff;
}`,
    custom: `/* 自定义样式 */
.custom-code-demo {
  padding: 2rem;
  background: linear-gradient(135deg, hsl(var(--p) / 0.1), hsl(var(--s) / 0.1));
  border-radius: 1rem;
  border: 2px solid hsl(var(--p) / 0.3);
}

.custom-code-block {
  box-shadow: 0 8px 32px hsl(var(--p) / 0.2);
  border: 2px solid hsl(var(--p) / 0.5);
}`,
    interactive: `/* 交互样式 */
.interactive-code {
  position: relative;
}

.copy-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.code-demo:hover .copy-button {
  opacity: 1;
}

.fold-button {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.fold-button:hover {
  transform: scale(1.1);
}`,
  }
  return styles[demoType] || ''
}
</script>

<template>
  <div class="codedemo-demo-container min-h-screen bg-gradient-to-br from-base-100 to-base-200">
    <div class="max-w-7xl mx-auto p-8">
      <!-- 页面标题 -->
      <div class="text-center mb-8">
        <h1 class="text-4xl font-bold text-base-content mb-4">CodeDemo 组件演示</h1>
        <p class="text-lg text-base-content/70">展示 CodeDemo 组件的各种使用场景和自定义选项</p>
      </div>

      <!-- 顶部按钮组 -->
      <div class="mb-8">
        <div class="flex flex-wrap gap-3 justify-center">
          <button
            v-for="config in demoConfigs"
            :key="config.id"
            @click="switchDemo(config.id)"
            class="btn gap-2 px-4 py-3 transition-all duration-200 hover:scale-105"
            :class="[
              activeDemo === config.id
                ? `btn-${config.color} shadow-lg`
                : `btn-outline btn-${config.color} hover:btn-${config.color}`,
            ]"
          >
            <span class="text-lg">{{ config.icon }}</span>
            <span class="font-medium">{{ config.name }}</span>
          </button>
        </div>
      </div>

      <!-- 演示区域 -->
      <div class="space-y-6">
        <!-- 使用CodeDemo组件展示每个演示 -->
        <CodeDemo
          v-for="config in demoConfigs"
          :key="config.id"
          v-show="activeDemo === config.id"
          :title="config.name"
          :description="getDescription(config.id)"
          :template="getTemplateCode(config.id)"
          :script="getScriptCode(config.id)"
          :style="getStyleCode(config.id)"
          language="vue"
          preview-height="auto"
          code-height="600px"
        >
          <template #preview>
            <!-- 使用Vue组件渲染 -->
            <component :is="currentExampleComponent" />
          </template>
        </CodeDemo>
      </div>

      <!-- 配置说明 -->
      <div class="mt-8 bg-base-100 rounded-3xl p-8 border border-base-300/30 shadow-xl">
        <h2 class="text-2xl font-semibold text-base-content mb-6 text-center">
          📚 配置说明 (Configuration Guide)
        </h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <!-- Props 配置 -->
          <div class="space-y-3">
            <h3 class="font-semibold text-base-content">Props 配置</h3>
            <div class="space-y-2 text-sm">
              <div><code class="bg-base-200 px-2 py-1 rounded">title</code> - 代码块标题</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">description</code> - 代码块描述</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">code</code> - 代码内容</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">language</code> - 编程语言</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">previewHeight</code> - 预览区域高度</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">codeHeight</code> - 代码区域高度</div>
            </div>
          </div>

          <!-- 功能配置 -->
          <div class="space-y-3">
            <h3 class="font-semibold text-base-content">功能配置</h3>
            <div class="space-y-2 text-sm">
              <div><code class="bg-base-200 px-2 py-1 rounded">showCopyButton</code> - 显示复制按钮</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">showFoldButton</code> - 显示折叠按钮</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">collapsible</code> - 是否可折叠</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">customClass</code> - 自定义CSS类</div>
            </div>
          </div>

          <!-- 支持的语言 -->
          <div class="space-y-3">
            <h3 class="font-semibold text-base-content">支持的语言</h3>
            <div class="space-y-2 text-sm">
              <div><code class="bg-base-200 px-2 py-1 rounded">javascript</code> - JavaScript</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">typescript</code> - TypeScript</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">vue</code> - Vue</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">python</code> - Python</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">css</code> - CSS</div>
              <div><code class="bg-base-200 px-2 py-1 rounded">html</code> - HTML</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.codedemo-demo-container {
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
}

.custom-code-demo {
  padding: 2rem;
  background: linear-gradient(135deg, hsl(var(--p) / 0.1), hsl(var(--s) / 0.1));
  border-radius: 1rem;
  border: 2px solid hsl(var(--p) / 0.3);
}

code {
  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
}

/* 按钮动画 */
.btn {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover {
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .codedemo-demo-container {
    padding: 1rem;
  }

  .btn {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
}
</style>
